<template>
  
    <transition name="fade">
      <div
        v-if="dialogVisible"
        ref="appDialog"
        class="appDialog"
        @click="cancelPop($event)"
        @touchmove.prevent
      >
        <div class="appDialog-shadow"></div>
        <div
          v-loading="loading"
          :style="{
            width: computedWidth,
            height: computedheight,
          }"
          class="appDialog-content"
          @click.stop
        >
          <div class="appDialog-header">
            <div class="appDialog-title">
              {{ title }}
            </div>
            <div class="appDialog-close" @click="close()">
              <el-icon color="#999" size="26">
                <Close />
              </el-icon>
            </div>
          </div>
          <div class="appDialog-body">
            <slot></slot>
          </div>
          <slot v-if="isFooter" name="footer">
            <div class="appDialog-footer">
              <div class="appDialog-buttongourp">
                <el-button
                  class="appDialog-buttongourp-button"
                  plain
                  @click="dialogVisible = false"
                >
                  取消
                </el-button>
                <el-button
                  class="appDialog-buttongourp-button"
                  type="primary"
                  @click="confirm"
                >
                  确定
                </el-button>
              </div>
            </div>
          </slot>
        </div>
      </div>
    </transition>
  </template>
  
  <script setup>
  import { computed } from "vue";
  defineExpose({
    open,
    close,
    closed,
    showLoading,
    hideLoading,
  });
  const emits = defineEmits(["confirm", "cancel"]);
  const { proxy } = getCurrentInstance();
  
  const dialogVisible = ref(false);
  
  const props = defineProps({
    title: String,
    width: {
      default: 400,
      type:[ Number,String],
    },
  
    height: {
      default: undefined,
      type: [ Number,String],
    },
    isCancel: {
      default: true,
      type: Boolean,
    },
    isFooter: {
      default: true,
      type: Boolean,
    },
  });
  
  const loading = ref(false);

  const computedWidth = computed(() => {
    try {
      if (props.width.indexOf("%") != -1) {
        return props.width;
      } else if (!isNaN(parseFloat(props.width))) {
        return props.width + "px";
      } else {
        return props.width;
      }
    }catch (e) {
      return props.width;;
    }
  
  });
  const computedheight= computed(() => {
    if (props.height) {
      if (props.height.indexOf("%") != -1) {
        return props.height;
      } else if (!isNaN(parseFloat(props.height))) {
        return props.height + "px";
      }
    } else {
      //  return 'auto'
    }
  });
  
  async function open() {
    dialogVisible.value = true;
    await proxy.$nextTick();
  }
  
  function confirm() {
    emits("confirm");
  }
  
  function close() {
    dialogVisible.value = false;
    closed();
    emits("cancel");
  }
  
  function showLoading() {
    loading.value = true;
  }
  
  function hideLoading() {
    loading.value = false;
  }
  
  function closed() {
    //console.log(proxy.$parent)
  }
  
  function cancelPop() {
    if (props.isCancel) {
      close();
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .appDialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background-color: rgba($color: #000000, $alpha: 0.4);
  
    &-content {
      width: 400px;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 0 18px 18px 18px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: fit-content;
      background-color: #fff;
      animation-name: content-show;
      animation-duration: 0.4s;
  
    }
  
    &-header {
      margin-right: 0;
  
      height: 60px;
      display: flex;
      align-items: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    &-footer {
      display: flex;
      justify-content: space-between;
      flex-direction: row-reverse;
      align-items: center;
      padding-top: 25px;
    }
  
    &-buttongourp {
      &-button {
      }
    }
  
    &-title {
      position: relative;
      line-height: 24px;
      font-size: 20px;
      color: #333;
    }
  
    &-close {
      // color: color.$base;
      cursor: pointer;
    }
  }
  
  @keyframes content-show {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.25s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  </style>
  